<template>
  <div class="waiting-time-chart">
    <div ref="chartContainer" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

export default {
  name: 'Jiaohao',
  setup() {
    const chartContainer = ref(null);
    let chart = null;

    const initChart = async () => {
      if (!chartContainer.value) return;
      
      // 强制设置容器尺寸
      chartContainer.value.style.width = '375px';
      chartContainer.value.style.height = '300px';
      chartContainer.value.style.minWidth = '375px';
      chartContainer.value.style.minHeight = '300px';
      
      // 等待DOM更新
      await nextTick();
      
      // 销毁已存在的图表实例
      if (chart) {
        chart.dispose();
      }
      
      chart = echarts.init(chartContainer.value);

      const option = {
        backgroundColor: '#0f2035',
        title: {
          text: '累计平均叫号等待时长TOP5',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'bold'
          },
          left: 'center',
          top: '10px',
          padding: [0, 0, 0, 0],
          itemGap: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '20%'
        },
        xAxis: {
          type: 'category',
          data: ['单位A', '单位B', '单位C', '单位D', '单位E'],
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 40,
          interval: 10,
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '等待时长',
            type: 'bar',
            barWidth: '30%',
            data: [36, 27, 21, 14, 8],
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              color: '#fff',
              fontSize: 12
            },
            itemStyle: {
              color: function(params) {
                const colors = ['#e94c4c', '#ff9900', '#9b9bfc', '#00e4ff', '#00baff'];
                return colors[params.dataIndex];
              }
            }
          }
        ]
      };

      chart.setOption(option);
      
      // 确保图表正确渲染
      setTimeout(() => {
        if (chart) {
          chart.resize({
            width: 375,
            height: 300
          });
        }
      }, 50);
    };

    onMounted(() => {
      // 使用 setTimeout 确保 DOM 完全渲染
      setTimeout(() => {
        initChart();
      }, 100);
      
      // 添加窗口大小调整事件
      const handleResize = () => {
        if (chart) {
          setTimeout(() => {
            chart.resize({
              width: 375,
              height: 300
            });
          }, 50);
        }
      };
      
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      if (chart) {
        chart.dispose();
      }
      window.removeEventListener('resize', () => {});
    });

    return {
      chartContainer
    };
  }
};
</script>

<style scoped>
.waiting-time-chart {
  width: 375px;
  height: 300px;
  min-width: 375px;
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #0f2035;
  position: relative;
}

#chart {
  width: 375px;
  height: 300px;
  min-width: 375px;
  min-height: 300px;
}
</style>